<template>
  <div class="edit-form edit-dialog">
    <el-form
      ref="editFormRef"
      v-loading="loading"
      :model="editForm"
      :rules="rules"
      class="demo-editData"
      size="small"
    >
      <el-descriptions
        :column="2"
        border
        :colon="true"
        label-class-name="custom-description-label-160"
      >
        <el-descriptions-item>
          <template #label>
            <span class="colorRed">*</span>
            角色名称
          </template>
          <el-form-item prop="name">
            <el-input
              v-model="editForm.name"
              type="text"
              placeholder="请输入"
            />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <span class="colorRed">*</span>
            角色编号
          </template>
          <el-form-item prop="code">
            <el-input
              v-model="editForm.code"
              type="text"
              placeholder="请输入"
            />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            状态
          </template>
          <el-form-item>
            <el-switch
              v-model="editForm.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0"
            />
            <!-- @change="changeStatus($event, scope.row)" -->
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            是否显示顶部菜单
          </template>
          <el-form-item class="align-center">
            <pubDictRadio
              v-model="editForm.enterIndex"
              dict-code="SF"
              type="Number"
            />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item :span="2">
          <template #label>
            备注
          </template>
          <el-form-item>
            <el-input
              v-model="editForm.remark"
              type="textarea"
              maxlength="200"
              show-word-limit
              placeholder="请输入"
            />
          </el-form-item>
        </el-descriptions-item>
      </el-descriptions>
    </el-form>
    <div class="btn-group">
      <el-button class="btn-form-close" @click="close()">取消</el-button>
      <el-button
          type="primary"
          class="btn-form-save"
          @click="submitForm(editFormRef)"
        >
          保存
        </el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'add'
}
</script>

<script setup>
import { ref, reactive, onMounted } from 'vue'
const emit = defineEmits(['close', 'submitForm'])
const props = defineProps({
  editData: {
    type: Object,
    default() {
      return {}
    }
  },
  isEdit: Boolean
})
const editFormRef = ref()
const isSelect = ref(true)
const options = ref([])
const selected = ref({})
const selectValue = ref([])
const loading = ref(false)
const editForm = ref({
  name: '',
  code: '',
  enterIndex: 1,
  remark: '',
  pid: '',
  status: 1
})
const rules = reactive({
  name: [
    {
      required: true,
      message: '请输入',
      trigger: 'blur'
    }
  ],
  code: [
    {
      required: true,
      message: '请输入',
      trigger: 'blur'
    }
  ]
})

onMounted(() => {
  if (props.isEdit) {
    editForm.value = JSON.parse(JSON.stringify(props.editData))
    editForm.enterIndex = editForm.enterIndex + ''
    console.log(props.editData)
  }
})

const change = () => {
  // eslint-disable-next-line eqeqeq
  if (editForm.status == 1) {
    editForm.status = 0
  } else {
    editForm.status = 1
  }
}
const close = () => {
  emit('close')
}
const loadClose = () => {
  loading.value = false
}
const submitForm = editFormRef => {
  editFormRef.validate(valid => {
    if (valid) {
      // loading.value = true
      editForm.enterIndex = parseInt(editForm.enterIndex)
      console.log('editForm', editForm.value)
      emit('submitForm', editForm.value)
    }
  })
}
</script>

<style scoped>
.align-center {
  align-items: center;
}
</style>
